<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CheckBox Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC_ADMIN__/Styles/easyui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC_ADMIN__/Styles/icon.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC_ADMIN__/Styles/demo.css">
    <script type="text/javascript" src="__PUBLIC_ADMIN__/Js/jquerye.min.js"></script>
    <script type="text/javascript" src="__PUBLIC_ADMIN__/Js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>CheckBox Tree</h2>

<p>Tree nodes with check boxes.</p>

<div style="margin:20px 0;">
    <a href="#" class="easyui-linkbutton" onclick="getChecked()">GetChecked</a>
</div>
<!--<div style="margin:10px 0">
    <input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck
    <input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
</div>-->

<div class="panel" style="display: block;">
    <div class="easyui-panel panel-body panel-body-noheader" style="padding: 5px; width: 514px;" title="">
        <ul id="tt" class="easyui-tree tree"
            data-options="url:'__PUBLIC_ADMIN__/tree_data1.json',method:'get',animate:true,checkbox:true">

        </ul>
    </div>
</div>

<!--<div class="easyui-panel panel-body panel-body-noheader" style="padding: 5px; width: 803px;" title="">
    <ul id="tt" class="easyui-tree tree" data-options="url:'__PUBLIC_ADMIN__/tree_data1.json',method:'get',animate:true,checkbox:true">
        <li>
            <div id="_easyui_tree_1" class="tree-node">
               <span class="tree-title">My Documents</span></div>
            <ul style="display:block">
                <li>
                    <div id="_easyui_tree_2" class="tree-node">
                        <span class="tree-title">Photos</span></div>
                    <ul style="display:none">
                        <li>
                            <div id="_easyui_tree_3" class="tree-node">
                                </span><span class="tree-title">Friend</span>
                            </div>
                        </li>
                        <li>
                            <div id="_easyui_tree_4" class="tree-node"><span class="tree-title">Wife</span>
                            </div>
                        </li>
                        <li>
                            <div id="_easyui_tree_5" class="tree-node"><span class="tree-title">Company</span>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div id="_easyui_tree_6" class="tree-node"><span class="tree-title">Program Files</span>
                    </div>
                    <ul style="display:block">
                        <li>
                            <div id="_easyui_tree_7" class="tree-node"></span><span class="tree-title">Intel</span>
                            </div>
                        </li>
                        <li>
                            <div id="_easyui_tree_8" class="tree-node"><span class="tree-title">Java</span>
                            </div>
                        </li>
                        <li>
                            <div id="_easyui_tree_9" class="tree-node"><span class="tree-title">Microsoft Office</span>
                            </div>
                        </li>
                        <li>
                            <div id="_easyui_tree_10" class="tree-node"><span class="tree-title">Games</span>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div id="_easyui_tree_11" class="tree-node"><span class="tree-title">index.html</span></div>
                </li>
                <li>
                    <div id="_easyui_tree_12" class="tree-node"><span class="tree-title">about.html</span></div>
                </li>
                <li>
                    <div id="_easyui_tree_13" class="tree-node"><span class="tree-title">welcome.html</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>-->

<script type="text/javascript">
    function getChecked() {
        var nodes = $('#tt').tree('getChecked');
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].text;
        }
        alert(s);
    }
</script>
</body>
</html>